<template>
	<view class="container">
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
		
		<view class="content" v-else-if="recordData">
			<view class="header-section">
				<view class="match-title">{{recordData.match_title}}</view>
				<view class="match-date">{{formatDate(recordData.match_date)}}</view>
			</view>
			
			<view class="info-section">
				<view class="info-group">
					<view class="group-title">基本信息</view>
									<view class="info-item">
					<text class="info-label">执裁职位：</text>
					<text class="info-value position" :class="[
						getPositionText(recordData.position) === '主裁判' ? 'main-referee' : '',
						getPositionText(recordData.position) === '助理裁判' ? 'assistant-referee' : '',
						getPositionText(recordData.position) === '第四官员' ? 'fourth-official' : '',
						getPositionText(recordData.position) === '裁判监督' ? 'supervisor' : ''
					]">{{getPositionText(recordData.position)}}</text>
				</view>
					<view class="info-item">
						<text class="info-label">比赛级别：</text>
						<text class="info-value">{{recordData.match_level}}</text>
					</view>
					<view class="info-item" v-if="recordData.match_venue">
						<text class="info-label">比赛场地：</text>
						<text class="info-value">{{recordData.match_venue}}</text>
					</view>
					<view class="info-item" v-if="recordData.home_team || recordData.away_team">
						<text class="info-label">对阵双方：</text>
						<text class="info-value">{{recordData.home_team || '主队'}} VS {{recordData.away_team || '客队'}}</text>
					</view>
				</view>
				
				<view class="info-group">
					<view class="group-title">执裁信息</view>
									<view class="info-item">
					<text class="info-label">出勤状态：</text>
					<text class="info-value status" :class="[
						recordData.attendance_status === 'present' ? 'present' : '',
						recordData.attendance_status === 'absent' ? 'absent' : '',
						recordData.attendance_status === 'late' ? 'late' : '',
						!recordData.attendance_status ? 'present' : ''
					]">{{getStatusText(recordData.attendance_status)}}</text>
				</view>
					<view class="info-item">
						<text class="info-label">执裁评分：</text>
						<text class="info-value rating" v-if="recordData.execution_rating">{{recordData.execution_rating}}分</text>
						<text class="info-value" v-else style="color: #999;">未评分</text>
					</view>
					<view class="info-item" v-if="recordData.referee_fee">
						<text class="info-label">裁判费用：</text>
						<text class="info-value fee">¥{{recordData.referee_fee}}</text>
					</view>
				</view>
				
				<view class="info-group" v-if="recordData.performance_evaluation">
					<view class="group-title">执裁表现评价</view>
					<view class="evaluation-content">
						{{recordData.performance_evaluation}}
					</view>
				</view>
				

				
				<view class="info-group">
					<view class="group-title">记录信息</view>
					<view class="info-item">
						<text class="info-label">记录状态：</text>
						<text class="info-value status" :class="[
							recordData.record_status === '草稿' ? 'draft' : '',
							recordData.record_status === '待确认' ? 'pending' : '',
							recordData.record_status === '已确认' ? 'confirmed' : ''
						]">{{recordData.record_status}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">创建时间：</text>
						<text class="info-value">{{formatDateTime(recordData.create_time)}}</text>
					</view>
					<view class="info-item" v-if="recordData.update_time && recordData.update_time !== recordData.create_time">
						<text class="info-label">更新时间：</text>
						<text class="info-value">{{formatDateTime(recordData.update_time)}}</text>
					</view>
				</view>
			</view>
			
			<view class="action-section">
				<!-- 草稿状态显示编辑、删除、提交按钮 -->
				<template v-if="recordData.record_status === '草稿'">
					<button class="edit-btn" @click="editRecord">编辑记录</button>
					<button class="submit-btn" @click="submitRecord">提交审核</button>
					<button class="delete-btn" @click="deleteRecord">删除记录</button>
				</template>
				
				<!-- 待确认状态显示确认按钮 -->
				<template v-else-if="recordData.record_status === '待确认'">
					<button class="confirm-btn" @click="confirmRecord">确认记录</button>
				</template>
				
				<!-- 已确认状态不显示操作按钮，或者只显示查看按钮 -->
				<template v-else-if="recordData.record_status === '已确认'">
					<view class="status-info">
						<text class="confirmed-text">记录已确认</text>
					</view>
				</template>
			</view>
		</view>
		
		<view class="error" v-else>
			<text>记录不存在或加载失败</text>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/tokenManager.js';
	
	export default {
		data() {
			return {
				recordId: '',
				recordData: null,
				loading: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.recordId = options.id;
				this.loadRecordDetail();
			} else {
				this.loading = false;
				uni.showToast({
					title: '记录ID缺失',
					icon: 'none'
				});
			}
		},
		methods: {
			// 加载记录详情
			async loadRecordDetail() {
				try {
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const res = await refereeRecordService.getRecordDetail(this.recordId);
					
					if (res && res.code === 0) {
						// 数据预处理，确保显示正确
						this.recordData = {
							...res.data,
							// 标准化出勤状态
							attendance_status: this.normalizeAttendanceStatus(res.data.attendance_status)
						};
						console.log('记录详情加载成功:', this.recordData);
					} else {
						console.error('加载记录详情失败:', res);
						uni.showToast({
							title: res ? res.message : '加载失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					console.error('加载记录详情失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 编辑记录
			editRecord() {
				// 由于要求简化，这里跳转到编辑页面（可以复用添加页面的代码）
				uni.navigateTo({
					url: `/packageMy/my/edit-match-record?id=${this.recordId}`
				});
			},
			
			// 删除记录
			deleteRecord() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条执裁记录吗？删除后无法恢复。',
					success: async (res) => {
						if (res.confirm) {
							await this.confirmDelete();
						}
					}
				});
			},
			
			// 确认删除
			async confirmDelete() {
				try {
					const token = getToken();
					
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const res = await refereeRecordService.deleteRefereeRecord(this.recordId);
					
					if (res && res.code === 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res ? res.message : '删除失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					console.error('删除记录失败:', error);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			},
			
			// 提交记录审核
			submitRecord() {
				uni.showModal({
					title: '确认提交',
					content: '确定要提交这条执裁记录进行审核吗？提交后将无法再编辑。',
					success: async (res) => {
						if (res.confirm) {
							await this.confirmSubmit();
						}
					}
				});
			},
			
			// 确认提交
			async confirmSubmit() {
				try {
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const res = await refereeRecordService.submitRefereeRecord(this.recordId);
					
					if (res && res.code === 0) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						
						// 重新加载记录详情
						setTimeout(() => {
							this.loadRecordDetail();
						}, 1500);
					} else {
						uni.showToast({
							title: res ? res.message : '提交失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					console.error('提交记录失败:', error);
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					});
				}
			},
			
			// 确认记录
			confirmRecord() {
				uni.showModal({
					title: '确认记录',
					content: '确定要确认这条执裁记录吗？确认后记录将被正式保存。',
					success: async (res) => {
						if (res.confirm) {
							await this.confirmRecordStatus();
						}
					}
				});
			},
			
			// 确认记录状态
			async confirmRecordStatus() {
				try {
					const refereeRecordService = uniCloud.importObject('referee-record-service');
					const res = await refereeRecordService.confirmRefereeRecord(this.recordId);
					
					if (res && res.code === 0) {
						uni.showToast({
							title: '确认成功',
							icon: 'success'
						});
						
						// 重新加载记录详情
						setTimeout(() => {
							this.loadRecordDetail();
						}, 1500);
					} else {
						uni.showToast({
							title: res ? res.message : '确认失败',
							icon: 'none'
						});
					}
					
				} catch (error) {
					console.error('确认记录失败:', error);
					uni.showToast({
						title: '确认失败',
						icon: 'none'
					});
				}
			},
			
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},
			
			// 格式化日期时间
			formatDateTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			

			
			// 标准化出勤状态
			normalizeAttendanceStatus(status) {
				const statusMap = {
					'正常出勤': 'present',
					'缺勤': 'absent',
					'迟到': 'late',
					'present': 'present',
					'absent': 'absent',
					'late': 'late'
				};
				return statusMap[status] || 'present'; // 默认为正常出勤
			},
			
			// 获取状态文本
			getStatusText(status) {
				const textMap = {
					'present': '正常出勤',
					'absent': '缺勤',
					'late': '迟到',
					'正常出勤': '正常出勤',
					'缺勤': '缺勤',
					'迟到': '迟到'
				};
				return textMap[status] || '正常出勤'; // 默认显示正常出勤
			},
			
			// 获取岗位中文文本
			getPositionText(position) {
				const positionMap = {
					'main_referee': '主裁判',
					'assistant_referee': '助理裁判',
					'fourth_official': '第四官员',
					'referee_supervisor': '裁判监督',
					'supervisor': '裁判监督',
					'边裁判': '助理裁判', // 兼容旧数据
					'主裁判': '主裁判',
					'助理裁判': '助理裁判',
					'第四官员': '第四官员',
					'裁判监督': '裁判监督'
				};
				return positionMap[position] || position || '未知职位';
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.loading, .error {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
	.header-section {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		text-align: center;
	}
	
	.match-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15rpx;
		line-height: 1.3;
	}
	
	.match-date {
		font-size: 28rpx;
		color: #666666;
	}
	
	.info-section {
		margin-bottom: 40rpx;
	}
	
	.info-group {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.group-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 200rpx;
		flex-shrink: 0;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}
	
	.info-value.position {
		padding: 4rpx 12rpx;
		border-radius: 15rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.info-value.position.main-referee {
		background-color: #FF6B6B;
	}
	
	.info-value.position.assistant-referee {
		background-color: #4ECDC4;
	}
	
	.info-value.position.fourth-official {
		background-color: #45B7D1;
	}
	
	.info-value.position.supervisor {
		background-color: #96CEB4;
	}
	
	.info-value.status {
		padding: 4rpx 12rpx;
		border-radius: 15rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.info-value.status.present {
		background-color: #4CAF50;
	}
	
	.info-value.status.absent {
		background-color: #F44336;
	}
	
	.info-value.status.late {
		background-color: #FF9800;
	}
	
	.info-value.status.draft {
		background-color: #9E9E9E;
	}
	
	.info-value.status.pending {
		background-color: #FF9800;
	}
	
	.info-value.status.confirmed {
		background-color: #4CAF50;
	}
	
	.info-value.rating {
		color: #FFA726;
		font-weight: bold;
	}
	
	.info-value.fee {
		color: #4CAF50;
		font-weight: bold;
	}
	
	.evaluation-content {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 15rpx;
	}
	
	.action-section {
		display: flex;
		gap: 20rpx;
		padding: 0 20rpx 40rpx;
		flex-wrap: wrap;
	}
	
	.edit-btn, .submit-btn, .delete-btn, .confirm-btn {
		flex: 1;
		min-width: 200rpx;
		height: 100rpx;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.edit-btn {
		background-color: #1BAE76;
	}
	
	.submit-btn {
		background-color: #2196F3;
	}
	
	.delete-btn {
		background-color: #F44336;
	}
	
	.confirm-btn {
		background-color: #4CAF50;
	}
	
	.status-info {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 40rpx;
	}
	
	.confirmed-text {
		font-size: 32rpx;
		color: #4CAF50;
		font-weight: bold;
	}
</style> 